<template>
  <div>
    <i-ep-close
      v-show="!panelSetIcon"
      class="el-icon-close"
      style="float: right; padding: 3px 0"
      @click="deletePanelItem"
    />
    <div>
      <div class="top-wrap">
        <div class="left-wrap">
          <div>
            <span class="move-logo">DKIA</span>
          </div>
        </div>

        <div class="center-wrap">
          <div class="title-msg">{{ params?.title || "---" }}</div>
          <div class="title-con">PRODUCTION INFORMATION BOARD</div>
        </div>

        <div class="right-wrap">
          <div class="it-bg3">
            <div style="width: 100px">
              <div class="nowTime">46545</div>
              <div class="nowDate">2023333</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
const emit = defineEmits(["deletePanelItemEvent"]);

const props = defineProps({
  panelSetIcon: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  id: {
    type: String,
    default: () => {
      return "";
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  params: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
const { panelSetIcon, id, params } = toRefs(props);
function deletePanelItem() {
  emit("deletePanelItemEvent", id.value);
}
</script>

<style lang="scss">
.top-wrap {
  display: flex;
  justify-content: space-between;
  margin: 0px;
  min-width: 100%;
  height: 100%;
  background-image: url(@/assets/images/screen/preview7.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  // background: linear-gradient(0deg, #111825, #151E29);

  .left-wrap {
    margin-left: 20px;
    display: flex;
    justify-content: center;
    align-items: center;

    .move-logo {
      font-size: 32px;
      font-family: "DINPro";
      font-weight: bold;
      color: #ffffff;
      letter-spacing: 2px;
      filter: drop-shadow(rgba(0, 11, 27, 0.66) 1px 1px 6px)
        drop-shadow(#5f9fff 2px 1px 8px);
      margin-top: 20px;
      display: block;
    }
  }

  .center-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .title-msg {
      font-size: 30px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #ffffff;
      letter-spacing: 2px;
      filter: drop-shadow(rgba(0, 11, 27, 0.66) 1px 1px 6px)
        drop-shadow(rgb(95, 159, 255) 2px 1px 8px);
    }

    .title-con {
      font-size: 12px;
      font-family: DINPro;
      font-weight: normal;
      color: #ffffff;
      margin-top: 4px;
      letter-spacing: 1px;
      filter: drop-shadow(rgba(59, 59, 59, 0.66) 1px 1px 6px)
        drop-shadow(#5f9fff 2px 1px 8px);
    }
  }

  .right-wrap {
    display: flex;
    justify-content: center;
    align-items: center;

    .it-bg3 {
      padding: 12px 10px;
      text-align: center;
      width: 113px;
      // height: 41px;
      margin-right: 20px;
    }

    .nowTime {
      font-size: 22px;
      // font-family: Source Han Sans CN;
      font-family: DINPro;
      font-weight: bold;
      color: #ceeaff;
      text-align: center;
    }

    .nowDate {
      margin-top: 5px;
      font-size: 16px;
      font-family: DINPro;
      // font-family: Source Han Sans CN;
      font-weight: bold;
      color: #ceeaff;
      text-align: center;
    }
  }
}
</style>
